<template>
    <div class="sendMsg">
        <van-nav-bar title="验证码" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-notice-bar left-icon="volume-o" text="牢记账号密码，不要随意泄露密码，请勿随意交易账号！" />
        <div class="content">
            <van-field v-model="code" name="验证码" placeholder="验证码">
                <template #button>
                    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="sendMsg" size="small">
                        发送验证码
                    </van-button>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="primary" :disabled="!flag" class="custom_btn" @click="checkCode">
                    提交
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import { doSendmsgcode, doCheckcode } from '@/apis/user';
import { showToast } from 'vant';
export default {
    data() {
        return {
            code: '',
            tel: ''
        }
    },
    computed: {
        flag() {
            return /^\d{5}$/.test(this.code)
        }
    },
    created() {
        this.tel = localStorage.getItem("tel")
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        sendMsg() {
            doSendmsgcode({ tel: this.tel }).then(res => {
                // console.log(res.data);
                this.code = res.data.data
            })
        },
        checkCode() {
            console.log(this.code);
            doCheckcode({ tel: this.tel, telcode: this.code }).then(res => {
                if (res.data.code != 200) {
                    return showToast('验证码错误')
                }
                this.$router.push("/register/pass")
            })
        }
    }
}
</script>

<style lang="less" scoped></style>